<template>
	<view>
		<view class="call-box u-m-t-2">
			<u-icon name="scan" @click="scan" size="48" class="u-m-r-30"></u-icon>
			<u-search class="u-flex-1" placeholder="请输入客户手机号或名称" shape="square" :show-action="false" v-model="keyword" @focus="information = true" @blur="searchBlur" @change="searchKey"></u-search>
		</view>
		<view class="search-list" v-if="information == true">
			<view class="u-flex u-justify-content u-p-20" v-if="loading">
				<u-loading mode="flower"></u-loading><text class="u-tips-color u-m-l-10">搜索中...</text>
			</view>
			<view v-if="searchList.length > 0">
				<view class="u-m-l-30 u-m-t-10 u-m-b-10"><text class="u-tips-color u-font-24">共{{searchList.length}}条搜索结果</text></view>
				<u-cell-group>
					<u-cell-item 
						v-for="(item,index) in searchList"
						:key="index"
						:title="item.name" :value="item.mobile"
						 @click="chooseCustomer(item)">
					</u-cell-item>
				</u-cell-group>
			</view>
			<view class="u-p-60" v-if="!loading && searchList.length == 0">
				<u-empty text="没有搜索结果" mode="search"></u-empty>
			</view>
		</view>
		
		<view class="bg-white" v-if="information == false && info.id > 0">
			<view class="section-head">
				<view class="u-p-30">
					<view class="blue-text"></view>
					<text class="u-font-32">用户信息</text>
				</view>
			</view>
			<!-- 个人用户 -->
			<view class="user-msg u-flex u-border-bottom u-p-l-30">
				<view class="u-text-center u-p-r-30">
					<u-avatar :src="fileURL+info.face" :size="100"></u-avatar>
				</view>
				<view class="list u-flex-1">
					<!-- <view class="item">用户类型：{{info.usertype}}</view> -->
					<view class="item">用户昵称：{{info.name}}</view>
					<!-- <view class="item">猿收ID：{{info.ysid}}</view> -->
					<view class="item">手机号码：{{info.mobile}}</view>
				</view>
			</view>
			<view class="section-head">
				<view class="u-p-30">
					<view class="blue-text"></view>
					<text class="u-font-32">用户现有积分</text>
				</view>
			</view>
			<view class="u-p-l-30 u-p-r-30 u-p-b-30">
				<u-table>
					<u-tr>
						<u-th>用户现有积分</u-th>
						<u-th>积分价值（元）</u-th>
						<u-th>操作</u-th>
					</u-tr>
					<u-tr>
						<u-td>{{integralInfo.integral}}</u-td>
						<u-td>{{ Math.floor((integralInfo.integral / integralInfo.swapratio)*100) / 100 }}</u-td>
						<u-td><view><text @click="startUseIntegral(info.id,2)" class="links">使用</text></view></u-td>
					</u-tr>
				</u-table>
			</view>
			<!-- 企业积分 -->
			<view v-if="info.bindinfo.enterpriselist.length > 0">
				<view class="section-head">
					<view class="u-p-30">
						<view class="blue-text"></view>
						<text class="u-font-32">客户组现有积分</text>
					</view>
				</view>
				<view class="u-p-l-30 u-p-r-30 u-p-b-30">
					<u-table>
						<u-tr>
							<u-th>客户组名称</u-th>
							<u-th>现有积分</u-th>
							<u-th>操作</u-th>
						</u-tr>
						<u-tr v-for="(item,index) in info.bindinfo.enterpriselist" :key="index">
							<u-td>{{item.name}}</u-td>
							<u-td>{{item.integral}}</u-td>
							<u-td><view><text @click="startUseIntegral(item.id,3)" class="links">使用</text></view></u-td>
						</u-tr>
					</u-table>
				</view>
			</view>
		</view>
		<!-- 使用积分 -->
		<u-popup v-model="integralShow" mode="bottom" border-radius="14" :closeable="true" z-index="99">
			<view class="section-head">
				<view class="u-p-l-30 u-p-r-30 u-p-t-30">
					<view class="blue-text"></view>
					<text class="u-font-32">设置消耗积分</text>
				</view>
			</view>
			<view class="u-p-l-30 u-p-t-30 u-p-b-0"><text>可使用积分：</text><text class="u-font-32">{{myIntegral.integral}}</text><text>分</text><text>({{ Math.floor((myIntegral.integral / myIntegral.swapratio)*100) / 100 }}元)</text></view>
			<view class="tips">输入金额或积分，按1元等于{{myIntegral.swapratio}}积分换算</view>
			<u-form :model="form" ref="uForm" label-position="top" :error-type="['toast']">
				<view class="u-flex u-p-l-30 u-p-r-30" style="align-items: flex-end;">
					<view class="u-flex-1">
						<u-form-item label="输入金额" prop="amount" required>
							<u-input v-model="form.amount" type="number" :border="true" placeholder="金额换算积分" clearable @input="convertIntegral"/>
						</u-form-item>
					</view>
					<view class="u-p-l-15 u-p-r-15 u-p-b-24 u-text-center u-tips-color">
						<view class="u-font-24">换算</view>
						<text class="iconfont icon-jixuduihuan"></text>
					</view>
					<view class="u-flex-1">
						<u-form-item label="输入积分" prop="integral" required>
							<u-input v-model="form.integral" type="number" :border="true" placeholder="消耗积分数" clearable @input="convertAmout"/>
						</u-form-item>
					</view>
				</view>
			</u-form>
			<view class="u-p-l-30 u-p-r-30 u-p-t-30">
				<u-input v-model="form.remarks" type="textarea" :border="true" placeholder="备注" />
			</view>
			<view class="u-p-30">
				<u-button type="primary" class="u-flex-1" @click="confirmOrder = true" :disabled="disabled">提交扣除用户积分</u-button>
			</view>
		</u-popup>
		<!-- 确认扣除积分 -->
		<u-popup v-model="confirmOrder" mode="bottom" border-radius="14" :closeable="true" z-index="99">
			<view class="confirm-order u-p-t-40">
				<view class="u-text-center u-p-t-30">
					<view class="u-m-r-10"><u-icon name="question-circle-fill" size="120" class="u-type-warning"></u-icon></view>
					<view class="u-font-36">确认兑换</view>
				</view>
				<view class="u-p-b-20 u-p-t-15 u-text-center u-font-28 u-tips-color"><text>请确认以下信息</text></view>
				<view class="u-p-l-30 u-p-r-30">
					<u-form :model="form" label-width="140rpx" :label-style="{'font-size': '32rpx'}">
						<u-form-item label="使用积分" :border-bottom="false">
							<view class="u-flex-1" style="border-bottom: 0.5px dotted #d5d5d5;margin: 0 10px;"></view>
							<view>
								<view>
									<text class="u-font-32" style="font-weight: bold;">{{form.integral}}</text>
								</view>
								<!-- <view>
									<text class="u-font-24 u-tips-color">积分价值{{ Math.floor((myIntegral.integral / myIntegral.swapratio)*100) / 100 }}元</text>
								</view> -->
							</view>
						</u-form-item>
						<u-form-item label="备注说明" :border-bottom="false" label-position="top">
							<!-- <view class="u-flex-1" style="border-bottom: 0.5px dotted #d5d5d5;margin: 0 10px;"></view>
							<text class="u-font-32">{{form.remarks}}</text> -->
							<u-input v-model="form.remarks" type="textarea" :border="true" placeholder="备注" :disabled="true"/>
						</u-form-item>
					</u-form>
				</view>
				
				<view class="tips"><text>请确认无误后点击确认提交，提交后无法撤销。</text></view>
				<view class="navigation-sticky-box">
					<view class="navigation u-p-b-0 u-m-b-0">
						<view class="left">
							<view class="u-text-left u-flex-1 u-p-l-40">
								<view><text class="u-font-24 u-tips-color">确认后，将扣除客户积分：</text></view>
								<!-- <text class="text-orange goods-price">￥</text> -->
								<text class="u-font-36 goods-price text-orange">{{form.integral}}</text>
							</view>
						</view>
						<view class="right" @tap="$u.throttle(submitUpdateIntegral, 1000)">
							<view class="buy btn u-line-1 bg-gradual-blue">确认提交</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				keyword: '',
				searchList: [],
				//显示信息
				information:true,
				disabled: true,
				info:{
					face: '',
					bindinfo:{
						enterpriselist: []
					}
				},
				form:{
					enterpriseId: 0,
					userId: 0,
					amount: null,
					integral: null,
					remarks: ""
				},
				rules:{
					amount: [
						{ 
							required: true, 
							message: '请输入金额', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						},
						{
							min: 0,
							max: 10,
							message: '金额必须大于0且不得大于积分兑换金额'
						},
					],
					integral: [
						{
							required: true, 
							message: '请输入积分', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						},
						{
							min: 0,
							max: 10,
							message: '积分必须大于0且不得大于金额兑换积分'
						},
					]
				},
				integralInfo:{},
				myIntegral:{
					integral: 0,
				},
				confirmOrder: false,
				integralShow: false,
			}
		},
		onLoad(opt) {
			// this.message = opt.message
			// this.getQRCodeData()
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			scan() { //入库扫码
				// #ifdef H5
				this.getQRCodeData('70e649fba2e64bdfb2bdbc5af99e132a')
				// #endif
				uni.scanCode({
					autoZoom: false,
					scanType: ['qrCode'],
					success: (res) => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						
						this.getQRCodeData(res.result)
					},
					// fail: (err) => {
					// 	uni.showModal({
					// 		content: '识别错误，请再试一次',
					// 		complete: (res) => {
			
					// 		}
					// 	})
					// }
				});
			},
			//选择客户
			chooseCustomer(item){
				// 表示该用户下有加入的客户组
				let franchiseId = this.franchiseId
				this.$u.get('/User/Detail?userId='+item.id).then((res)=>{
					console.log('表示该用户下有加入的客户组再查看用户详情',res)
					this.info = res
					let enterpriselist = this.info?.bindinfo?.enterpriselist.filter((item)=>item.franchiseid == franchiseId) || []
					if(enterpriselist.length > 0){
						this.enterprise = {
							id: enterpriselist[0].parentid, //应为客户组id
							name: enterpriselist[0].name,
							type: enterpriselist[0].type,
							department: enterpriselist[0].department,
						}
					}
					
					this.getUserIntegral(this.info.id,2)
				})
				// if(item.enterprisenumber > 0){
				// 	// 表示该用户下有加入的客户组
				// 	let franchiseId = this.franchiseId
				// 	this.$u.get('/User/Detail?userId='+item.id).then((res)=>{
				// 		console.log('表示该用户下有加入的客户组再查看用户详情',res)
				// 		this.info = res
				// 		let enterpriselist = this.info?.bindinfo?.enterpriselist.filter((item)=>item.franchiseid == franchiseId) || []
				// 		if(enterpriselist.length > 0){
				// 			this.enterprise = {
				// 				id: enterpriselist[0].parentid, //应为客户组id
				// 				name: enterpriselist[0].name,
				// 				type: enterpriselist[0].type,
				// 				department: enterpriselist[0].department,
				// 			}
				// 		}
						
				// 		this.getUserIntegral(this.info.id,2)
				// 	})
				// }else{
				// 	this.info = {
				// 		...item,
				// 		enterpriselist: []
				// 	}
				// 	this.getUserIntegral(this.info.id,2)
				// }
				
			},
			// 关键词搜索客户
			searchKey(key){
				this.loading = true
				this.isNotReg = false
				this.$u.post('/User/List',{
					key: key,
					isALL: true
				}).then((res)=>{
					this.searchList = res.rows
					if(this.searchList.length == 0){
						if(this.$u.test.mobile(key)){
							this.isNotReg = true
						}
					}
					this.loading = false
				}).catch(()=>{
					this.loading = false
				})
			},
			// 焦点显示
			searchBlur(){
				setTimeout(()=>{
					this.information = false
				},100)
			},
			// 二维码识别用户
			getQRCodeData(message){
				let franchiseId = this.franchiseId
				this.$u.get('/AIO/Account/GetQRCodeInfo?code='+message).then((res)=>{
					this.info = res.account?.user
					let enterpriselist = this.info?.bindinfo?.enterpriselist.filter((item)=>item.franchiseid == franchiseId) || []
					if(enterpriselist.length > 0){
						this.enterprise = {
							id: enterpriselist[0].parentid, //应为客户组id
							name: enterpriselist[0].name,
							type: enterpriselist[0].type,
							department: enterpriselist[0].department,
						}
					}
					console.log('this.info',this.info)
					this.information = false
					this.getUserIntegral(this.info.id,2)
				})
			},
			// 
			startUseIntegral(id,type){ // type 2用户 3企业
				this.integralShow = true
				this.getUserIntegral(id,type)
			},
			// 获取积分
			getUserIntegral(id,type){ // type 2用户 3企业
				this.$u.get('/user/Integral/get?id='+id+'&type='+type).then((res)=>{
					console.log('getUserIntegral:',res)
					this.form.userId = res.userid
					this.form.enterpriseId = res.enterpriseid
					this.myIntegral = res
					this.rules.integral[1].max = this.myIntegral.integral
					this.rules.amount[1].max = Math.floor((this.myIntegral.integral / this.myIntegral.swapratio)*100) / 100
					
					if(type == 2){
						this.integralInfo = res
					}
				})
				// this.$u.get('/user/Integral/get?code='+code).then((res)=>{
				// 	console.log('getUserIntegral:',res)
				// 	this.form.userId = res.userid
				// 	this.form.enterpriseId = res.enterpriseid
				// 	this.myIntegral = res
				// 	this.rules.integral[1].max = this.myIntegral.integral
				// 	this.rules.amount[1].max = Math.floor((this.myIntegral.integral / this.myIntegral.swapratio)*100) / 100
				// 	this.$nextTick(()=>{
				// 		// this.$refs.uForm.setRules(this.rules);
				// 	})
				// 	this.information = false
				// })
			},
			convertIntegral(e){
				this.disabled = false
				if(!e){
					this.disabled = true
				}
				// 输入金额换算积分
				let countResult = e*this.myIntegral.swapratio > this.myIntegral.integral
				// this.form.integral = countResult? this.myIntegral.integral:e*this.myIntegral.swapratio
				this.form.integral = e*this.myIntegral.swapratio
				// this.$set(this.form,"integral",e*this.myIntegral.swapratio)
				if(countResult){
					uni.showToast({
						title: "该用户积分不足",
						icon: 'none'
					})
					// this.form.amount = null
					// this.form.integral = null
					this.disabled = true
				}
				
				this.$forceUpdate()
			},
			convertAmout(e){
				// 输入积分换算金额
				this.disabled = false
				if(!e){
					this.disabled = true
				}
				let countResult = e > this.myIntegral.integral
				// this.form.amount = e / this.myIntegral.swapratio
				this.form.amount = Math.floor((e / this.myIntegral.swapratio)*100) / 100
				// this.$set(this.form,"amount",Math.floor((e / this.myIntegral.swapratio)*100) / 100)
				if(countResult){
					uni.showToast({
						title: "该用户积分不足",
						icon: 'none'
					})
					// this.form.amount = null
					// this.form.integral = null
					this.disabled = true
				}
				
				this.$forceUpdate()
			},
			submitUpdateIntegral(){
				// 提交使用积分
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						
						let param = {
							amount: this.form.amount,
							userId: this.info.id,
							// enterpriseId: this.form.enterpriseId,
							remarks: this.form.remarks
						}
						if(this.form.enterpriseId > 0){
							param.enterpriseId = this.form.enterpriseId
						}
						
						this.$u.post('/user/Integral/use',param).then((res)=>{
							uni.showModal({
								content: '提交成功',
								complete: () => {
									uni.navigateBack()
								}
							})
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.call-box {
		display: flex;
		align-items: center;
		background: #fff;
		padding: 30rpx;
	}
	.user-msg{
		padding-bottom: 30rpx;
		.list{
			.item{
				font-size: 28rpx;
				margin-bottom: 4rpx;
			}
		}
	}
	.tips{
		padding: 10rpx 30rpx;
		color: $u-tips-color;
	}
	// 提交订单栏
	.navigation-sticky-box {
		position: sticky;
		z-index: 99;
		bottom: 0;
		background: #fff;
		padding-bottom: 20rpx;
	
		.navigation {
			display: flex;
			width: 700rpx;
			// background-color: #ffffff;
			padding: 20rpx 0 30rpx;
			margin: 10rpx auto;
	
			.left {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				flex: 1;
				background-color: #fff;
				border-top-left-radius: 50rpx;
				border-bottom-left-radius: 50rpx;
				box-shadow: $u-color-border-shadow;
	
				.item {
					margin: 0 30rpx;
					display: flex;
	
					.icon {
						position: relative;
					}
	
					&.car {
						text-align: center;
						position: relative;
	
						.car-num {
							position: absolute;
							top: -10rpx;
							right: -10rpx;
						}
					}
				}
			}
	
			.right {
				display: flex;
				font-size: 28rpx;
				align-items: center;
	
				.btn {
					line-height: 100rpx;
					padding: 0 30rpx;
					border-radius: 50rpx;
					color: #ffffff;
					border-top-left-radius: 0;
					border-bottom-left-radius: 0;
					width: 240rpx;
					text-align: center;
				}
	
				.cart {
					background-color: #ed3f14;
					margin-right: 30rpx;
				}
	
				.buy {
					background-color: #ff7900;
				}
			}
		}
	}
	.text-orange{
		color: $u-color-orange;
	}
</style>
